<template>
	<!-- 面试记录 -->
	<view class="job-records-index">
		<view class="jri-tabs">
			<view v-for="(item, index) in tab" :key="index" @click="tabChange(index,item.status)">
				<text :class="['jri-name', tabIndex == index ? 'jri-act':'']">{{item.name}}</text>
			</view>
		</view>
		<view class="jri-h"></view>
		<view class="jri-lists">
			<view v-for="(item, index) in curList" :key="item.id" class="jri-item">
				<view class="jri-item-time">{{item.time || ''}}</view>
				<view v-for="(cItem,cIndex) in item.child" :key="cItem.id" class="jri-item-user" @click="goDetails(cItem)">
					<image src="https://web.suqzp.com/public/v10.png" class="user-logo" mode="aspectFill"></image>
					<view class="flex-1 user-msg">
						<view class="one-ellipsis fs-32">{{cItem.zhi}} · {{cItem.zi}}</view>
						<view class="one-ellipsis mar-top-15 fc-66 fs-28">{{cItem.name}}</view>
					</view>
					<view :class="['user-right', cItem.status == 1 ? 'uc-w' : cItem.status == 2?'uc-o': 'uc-c' ]">
						<view class="fs-26">{{cItem.status == 1 ? '待面试' : cItem.status == 2 ? '已超时' : '已完成'}}</view>
						<view class="mar-top-10">{{cItem.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				curStatus: 0,
				tab: [
					{type: 'all', name: '全部', status: 0},
					{type: 'wait', name: '待面试', status: 1},
					{type: 'overtime', name: '已超时', status: 2},
					{type: 'complete', name: '已完成', status: 3},
				],
				interviewList: [
					{
						id:5845,
						time: '2021年9月09日',
						child: [
							{id:111, name: '深圳腾讯科技', zhi: 'UI设计', zi: '10-13K', time: '18:00', status: 1},
							{id:122, name: '深圳腾讯科技', zhi: 'UI设计', zi: '10-13K', time: '18:00', status: 3},
							{id:133, name: '深圳腾讯科技', zhi: 'UI设计', zi: '10-13K', time: '18:00', status: 3},
							{id:144, name: '深圳腾讯科技', zhi: 'UI设计', zi: '10-13K', time: '18:00', status: 2},
						]
					},
					{
						id: 3164,
						time: '2021年10月10日',
						child: [
							{id:155, name: '深圳腾讯科技', zhi: 'UI设计', zi: '10-13K', time: '18:00', status: 2},
						]
					}
				]
			};
		},
		computed: {
			curList() {
				if(this.curStatus === 0) return this.interviewList
				let list = JSON.parse(JSON.stringify(this.interviewList))
				let newList = list.filter(item1 => {
					let newChild = item1.child.filter(item2 => item2.status === this.curStatus)
					item1.child = newChild
					return true
				}).filter(item3 => item3.child.length > 0)
				return newList
			}
		},
		methods:{
			tabChange(index,s) {
				this.tabIndex = index
				this.curStatus = s
				console.log(this.curStatus)
			},
			goDetails(item) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.interviewDetail,
					query: {
						status: item.status
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}
	
	.job-records-index {
		.jri-tabs {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 86rpx;
			line-height: 86rpx;
			font-size: 28rpx;
			color: #999;
			background: #fff;
			
			.jri-name {
				display: inline-block;
				height: 86rpx;
			}
			
			.jri-act {
				position: relative;
				color: #333333;
				
				&:after {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					content: '';
					width: 80rpx;
					height: 6rpx;
					background: #84C0F4;
					border-radius: 3rpx;
				}
			}
		}
		
		.jri-h {
			height: 86rpx;
		}
		
		.jri-lists {
			
			.jri-item {
				
				.jri-item-time {
					padding: 24rpx 32rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}
				
				.jri-item-user {
					// height: 150rpx;
					padding: 20rpx 32rpx;
					display: flex;
					align-items: center;
					background: #fff;
					border-bottom: 1px solid #F6F6F6;
					
					.user-logo {
						margin-right: 24rpx;
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
					}
					
					.user-msg {
						width: 400rpx;
						padding-right: 70rpx;
					}
					
					.user-right {
						width: 80rpx;
						font-weight: 500;
					}
					
					.uc-w {
						color: #40C228;
					}
					
					.uc-o {
						color: #F87171;
					}
					
					.uc-c {
						color: #5DA9EB;
					}
				}
			}
			
			
		}
	}

</style>
